<template>
    <!-- 多选表格组件
        1.支持选中记录
    -->
    <div>
        <el-table :data="props.data" :="$attrs" @select="selectHandle" @select-all="selectAllHandel" ref="table">
            <!-- 默认开启多选功能 -->
            <el-table-column type="selection"/>
            <slot></slot>
        </el-table>
    </div>
</template>

<script setup lang="ts">
import {nextTick, ref,watch} from 'vue' 
import { ElTable } from 'element-plus';

const props = defineProps({
    data:{
        type:Array,
        required:true
    }    
})
const selectedItems = defineModel('selectedItems',{type:Array<any>,default:new Array<any>})

const emit = defineEmits(["update:data"])
const table = ref<InstanceType<typeof ElTable>>()

const selectedId = ref<any>([])

// 单选事件
const selectHandle = (selected,current)=>{
    let isSelected = selected.includes(current)
    // console.log("已选中",selected);
    // console.log("当前操作行",current);
    let i = selectedId.value.indexOf(current.Id)

    if(isSelected&&i==-1){
        selectedId.value.push(current.Id)
    }else{
        selectedId.value.splice(i,1)
    }
    
    // console.log("记录",selectedId.value);
    
}

// 全选事件
const selectAllHandel = (selected)=>{
    let isSelected =  selected.length>0
    let tableData = table.value!.data!
    let idArray = tableData?.map(item=>item.Id)

    if(isSelected){
        // 全选中
        // 合并选中的id集
        let idSet = new Set([...selectedId.value,...idArray])
        selectedId.value = Array.from(idSet)

    }else{
        // 全取消
        // 删除当前页的id
        idArray.forEach(id => {
            let i = selectedId.value.indexOf(id)
            selectedId.value.splice(i,1)
        });

    }
}

// 监听选中id更新选中项
watch(()=>selectedId.value,(newVal,oldVal)=>{
    
    let tableData = table.value!.data!

    // 第一次选择处理
    if(selectedItems.value.length===0){    
        newVal.forEach(id => {
            selectedItems.value.push(tableData.find(item=>item.Id===id))
        });
        // console.log(selectedItems.value);
        return
    }

    let newId = [...newVal] // 克隆id数组
    
    for (let index = 0; index < selectedItems.value.length; index++) {
        let item = selectedItems.value[index]
        
        if(newVal.includes(item.Id)){
            // 存在 删除id记录
            newId.splice(newId.indexOf(item.Id),1)
        }else{
            // 不存在 删除选中项
            selectedItems.value.splice(index,1)
            index--
        }        
    }

    // 剩下的id为新增项
    newId.forEach(id => {
        // 添加选中项
        selectedItems.value.push(tableData.find(item=>item.Id===id))
    });

    // console.log(selectedItems.value);
    
},{deep:true})

// 监听表格数据变化 选中指定行
watch(()=>props.data,(newVal,oldVal)=>{
    // console.log("表格数据",newVal);
    // console.log("已选中",selectedItems.value);
    
    nextTick(()=>{
        newVal.forEach((item:any)=>{
            if(selectedId.value.includes(item.Id))
                table.value?.toggleRowSelection(item,true)
        })
    })
})

defineExpose({
    getSelectionItems:()=>{
        return selectedItems.value
    },
    getSelectionId:()=>{
        return selectedId.value
    }
})
</script>

<style lang="scss" scoped>

</style>